<template>
	<view>
		<!-- 	<view class="shop">
			<view class="shoptitle">商品信息</view>
			<view class="ttt">
				{{ shopinfo.child_name }}
			</view>
			<view class="tip">规格：{{ shopinfo.child_attr_name }} x1</view>
		</view> -->
		<view class="" style="height: 20rpx;">
			
		</view>
		<view class="top">
			<view class="img">
				<image src="/static/image/car.png" mode="aspectFill"></image>
			</view>
			<view class="flex_rs">
				<view class="tit">
					{{ info.express_name }}
				</view>
				<view class="rflex">
					{{ info.express_no }}
					<view @click="copy(info.express_no)" class="copy">复制</view>
				</view>
			</view>
		</view>
		<view class="mysteps" v-if="list2.length != 0">
			<uni-steps v-if="isshows" :options="list2" :active="active" direction="column" />
		</view>
		<view class="kongss" v-if="list2.length == 0">
			<image class="img" src="/static/image/okong.png" mode="aspectFill"></image>
			<view class="test">暂无物流信息</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isshows: false,
			active: 0,
			list2: [],
			info: {},
			shopinfo: {}
		};
	},
	onLoad(option) {
		this.$http
			.post('/api/sell_order/logistics', {
				id: option.id
			})
			.then((res) => {
				if (res.code == 1) {
					this.info = res.data
					this.list2 = res.data.logistics
					this.isshows = true
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
	},
	methods:{
		copy(data) {
			uni.setClipboardData({
				data: data,
				success: () => {
					console.log('success');
					uni.showToast({
						title: '已复制',
						icon: "none"
					});
				}
			});
		},
	}
};
</script>

<style lang="scss">
page {
	background: #f8f8f8;
}
.kongss {
	margin: 200rpx auto;
	text-align: center;
	width: 416rpx;
	.img {
		width: 416rpx;
		height: 416rpx;
	}
	.test {
		margin-top: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #adaaaa;
	}
}
.shop {
	width: 710rpx;
	height: 160rpx;
	background: #ffffff;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	margin: 20rpx auto;
	padding: 20rpx;
	box-sizing: border-box;
	.shoptitle {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
	}
	.ttt {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		margin-top: 6rpx;
	}
	.tip {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #aeaeae;
		margin-top: 6rpx;
	}
}

.top {
	width: 710rpx;
	height: 160rpx;
	background: #ffffff;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	padding: 20rpx;
	box-sizing: border-box;
	margin: 0rpx auto;
	display: flex;
	align-items: center;
	.img {
		width: 120rpx;
		height: 120rpx;
		background: #fc3e58;
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 96rpx;
			height: 96rpx;
			display: block;
		}
	}

	.flex_rs {
		margin-left: 26rpx;
		font-size: 28rpx;
		color: #000000;

		.tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
		}

		.rflex {
			display: flex;
			align-items: center;
			margin-top: 16rpx;
		}

		.copy {
			width: 72rpx;
			height: 36rpx;
			background: #f4f4f4;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #8e8e8e;
			line-height: 36rpx;
			text-align: center;
			margin-left: 15rpx;
		}
	}
}

.mysteps {
	width: 710rpx;
	overflow: auto;
	height: 80vh;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin: 20rpx auto;
	padding: 40rpx 32rpx;
	box-sizing: border-box;
	overflow: auto;
}
</style>
